<!--
 * @Author: 吴伟 rank@qq.com
 * @Date: 2024-12-15 20:50:55
 * @LastEditors: 吴伟 rank@qq.com
 * @LastEditTime: 2024-12-15 21:09:09
 * @FilePath: /block_chain/src/components/market/chance.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="chance">
    <div class="flex justify-between items-center">
      <!-- 市值卡片 -->
      <div class="card-item mr-16 card-item-1">
        <div class="text-grey font-22 mb-24 text-center">{{ $t('市值') }}</div>
        <div class="text-white font-32 mb-8 text-center">${{ marketValue }}万亿</div>
        <div class="text-red font-22 text-center">{{ marketValueChange }}%</div>
      </div>

      <!-- 成交量卡片 -->
      <div class="card-item mr-16">
        <div class="text-grey font-22 mb-24 text-center">{{ $t('成交量') }}</div>
        <div class="text-white font-32 mb-8 text-center">${{ volume }}万亿</div>
        <div class="text-red font-22 text-center">{{ volumeChange }}%</div>
      </div>

      <!-- 市场占有率卡片 -->
      <div class="card-item card-item-3">
        <div class="text-grey font-22 mb-24 text-center">{{ $t('市场占有率') }}</div>
        <div class="text-white font-32 mb-8 text-center">{{ marketShare }}%</div>
        <div class="text-grey font-22 text-center">BTC</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "chance",
  data() {
    return {
      marketValue: '3.79',
      marketValueChange: '-0.79',
      volume: '2,811.28',
      volumeChange: '-0.79',
      marketShare: '52.37'
    }
  }
}
</script>

<style scoped lang="scss">
.chance {

  .card-item {
    width: 228px;
    padding: 20px;
    background: #1a1a1a;
  }
  .card-item-1 {
    border-radius: 16px 0 0 16px;
  }
  .card-item-3 {
    border-radius: 0 16px 16px 0;
  }
}
</style>
